<template>
    <div>
        <c-list-template title="授信管理">
            <template slot="search">
                <el-row :gutter="5">
                    <el-col :span="5" class="flex-center">
                        <div class="mr-lg">供应商名称：</div>
                        <el-input v-model="querys.name" placeholder="请输入供应商名称" class="wh flex-1 mr-lg" />
                    </el-col>
                    <el-col :span="5" class="flex-center">
                        <div class="mr-lg">银行：</div>
                        <el-input v-model="querys.bank" placeholder="请输入银行" class="wh flex-1 mr-lg" />
                    </el-col>
                    <el-col :span="5" class="flex-center">
                        <div class="mr-lg">手机号：</div>
                        <el-input v-model="querys.mobile" placeholder="请输入手机号" class="wh flex-1 mr-lg" />
                    </el-col>
                    <el-col :span="4" class="flex-center ">
                        <div class="mr-lg">状态：</div>
                        <el-select v-model="querys.status" placeholder="请选择状态" class="wh flex-1 mr-lg">
                            <el-option v-for="(item, index) in creditState" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <div class="flex-x-end">
                            <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                            <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </template>
            <template slot="list">
                <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                    <el-table-column label="序号" align="center" width="80" type="index" />
                    <el-table-column label="供应商名称" width="250" align="left" prop="sellerName" />
                    <el-table-column label="授信额度（元）" width="150" align="right">
                        <template slot-scope="scope">
                            {{ scope.row.bankAmount | thousands}}
                        </template>
                    </el-table-column>
                    <el-table-column width="250" label="授信银行" align="left" prop="bank" />
                    <el-table-column width="100" label="授信利率" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.rate || 0 }} %
                        </template>
                    </el-table-column>
                    <el-table-column width="170" label="授信有效期" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.timeExpiry | dateYMDHMSFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column width="170" label="申请日期" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.timeCreate | dateYMDHMSFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="170" label="状态" align="center">
                        <template slot-scope="scope">
                            {{ creditState[scope.row.status * 1].label }}
                        </template>
                    </el-table-column>
                    <el-table-column width="130" fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- 待平台审核 -->
                            <el-link v-if="scope.row.status * 1 === 2" type="primary" @click="handleDetails(scope.row)">审核</el-link>
                            <!-- 审核已通过 , 待银行审核 -->
                            <el-link v-else type="primary" @click="handleDetails(scope.row)">详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template slot="pagination">
                <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </c-list-template>
        <c-credit-verify ref="cCreditVerify" />
    </div>
</template>
<script>
import { creditState } from "@/utils/status.js";
import cCreditVerify from "./components/c-credit-verify.vue";
export default {
    components: {
        cCreditVerify,
    },
    data () {
        return {
            total: 0,
            tableData: [],
            querys: {
                current: 1,
                size: 10,
            },
            creditState,
            loading: false,
        };
    },
    mounted () {
        this.tableList();
    },
    methods: {
        handleVerify (item) {
            this.$refs.cCreditVerify.handleOpen(item)
        },
        handleDetails (item) {
            this.$router.push({
                path: "/credit/creditApply/bankCredit/details",
                query: {
                    id: item.id,
                },
            });
        },
        tableList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            params.isBank = 1;
            const url = "/sellerCreditAmountApply/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records;
                this.total = res.total * 1;
                this.loading = false;
            });
        },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
